<template>
    <fragment v-if="item.children">
        <template v-if="item.children.length == 0">
            <el-menu-item :index="item.path">
                <hd-svg :name="item.icon"></hd-svg>
                <span slot="title">{{ item.title }}</span>
            </el-menu-item>
        </template>

        <el-submenu v-else :index="item.path">
            <template slot="title">
                <hd-svg :name="item.icon"></hd-svg>
                <span slot="title">{{ item.title }}</span>
            </template>

            <template v-for="child in item.children">
                <sidebar-item
                    v-if="child.children&&child.children.length>0"
                    :key="child.path"
                    :item="child"/>
                <el-menu-item v-else :key="child.path" :index="child.path">
                    <hd-svg :name="child.icon"></hd-svg>
                    <span slot="title">{{ child.title }}</span>
                </el-menu-item>
            </template>
        </el-submenu>
    </fragment>
</template>

<script>
export default {
    name: 'SidebarItem',
    props: {
        item: {
            type: Object,
            required: true
        }
    }
}
</script>
<style lang="scss" scoped>
.el-menu {
    border: none !important;
    height: 100%;
    width: 100% !important;
}
</style>
